<template>
	<cl-crud ref="crud" @load="onLoad" :on-refresh="onTableRefresh('search_content')">
		<cl-pagefull @resize="onResize">
			<template #head>
				<el-row type="flex">
					<cl-filter-group v-model="search" @reset="changeBiz">
						<cl-filter label="客户关键字">
							<el-input
								v-model="search.search_content"
								placeholder="手机号/微信号/客户名称/会员号"
								clearable
								style="width: 220px"
							/>
						</cl-filter>
						<cl-filter label="所属事业部">
							<cl-select
								v-model="search.biz_id"
								placeholder="请选择"
								filterable
								@change="changeBiz"
							>
								<el-option
									v-for="item in business"
									:key="item.biz_id"
									:label="item.biz_name"
									:value="item.biz_id"
								/>
							</cl-select>
						</cl-filter>
						<cl-filter label="分公司">
							<cl-select
								v-model="search.company_id"
								placeholder="请选择"
								clearable
								filterable
							>
								<el-option label="全部" value="" />
								<el-option
									v-for="item in bizRefData.company"
									:key="item.company_id"
									:label="item.company_name"
									:value="item.company_id"
								/>
							</cl-select>
						</cl-filter>
						<cl-filter label="品牌">
							<cl-select
								v-model="search.bra_id"
								placeholder="全部"
								clearable
								filterable
								multiple
								collapse-tags
							>
								<el-option
									v-for="item in bizRefData.brand"
									:key="item.bra_id"
									:label="item.bra_name"
									:value="item.bra_id"
								/>
							</cl-select>
						</cl-filter>
						<cl-filter label="所属城市">
							<cl-select
								v-model="search.city_id"
								placeholder="请选择"
								filterable
								clearable
							>
								<el-option label="全部" value="" />
								<el-option
									v-for="item in bizRefData.city"
									:key="item.id"
									:label="item.name"
									:value="item.id"
								/>
							</cl-select>
						</cl-filter>
						<cl-filter label="所属门店">
							<cl-shop-select
								v-model="search.dept_id"
								multiple
								:multiple-limit="10"
								placeholder="全部"
								clearable
								filterable
								collapse-tags
								:biz_id="search.biz_id"
							/>
						</cl-filter>
						<cl-filter label="所属推广">
							<cl-select
								v-model="search.operator_user_id"
								placeholder="请选择"
								clearable
								filterable
								@change="refresh"
							>
								<el-option label="全部" value="" />
								<el-option
									v-for="item in operatorUserList"
									:key="item.user_id"
									:label="item.user_name"
									:value="item.user_id"
								/>
							</cl-select>
						</cl-filter>
						<cl-filter label="客户类型">
							<cl-select
								v-model="search.cus_type"
								style="width: 120px"
								clearable
							>
								<el-option value="" label="全部" />
								<el-option :value="1" label="新客" />
								<el-option :value="2" label="老客" />
							</cl-select>
						</cl-filter>
						<cl-filter label="加微日期">
							<cl-date-picker
								v-model="search.wechat_join_time"
								type="daterange"
								range-separator="至"
								start-placeholder="开始日期"
								end-placeholder="结束日期"
								value-format="yyyy-MM-dd"
								:clearable="false"
								style="width: 210px"
							/>
						</cl-filter>
						<cl-filter>
							<!-- <el-button type="danger" @click="openMoreFilter">更多筛选</el-button> -->
							<!-- 更多筛选 -->
							<!-- <more-filter ref="filter" :search="search" @confirm="onFilter" /> -->
						</cl-filter>
					</cl-filter-group>
				</el-row>
			</template>
			<el-row>
				<!-- 数据表格 -->
				<cl-table v-bind="table" ref="table">
					<cl-empty slot="empty" />
					<!-- <template #column-customer="{ scope: { row } }">
						<cl-customer-new
							:gender="row.cus_sex"
							:name="row.cus_name"
							:mobile="row.cus_mobile"
							:wechat="row.cus_wx || '-'"
							:avatar="row.cus_img"
						/>
					</template> -->
					<template #column-cus_img="{ scope: { row } }">
						<img style="width: 50px;border-radius: 50%;" :src="row.cus_img">
					</template>
					<template #column-cus_type="{ scope: { row } }">
						<div
							class="cus_type"
							:class="{
								'color-primary': row.cus_type == 1,
								old: row.cus_type == 2,
								'color-danger': row.cus_type == 3,
								'color-warning': row.cus_type == 4
							}"
						>
							{{ row.cus_type_name }}
						</div>
					</template>
					<template #column-inherit_id="{ scope: { row } }">
						<div :class="{ 'color-success': !!row.inherit_id }">
							{{ !!row.inherit_id ? "是" : "否" }}
						</div>
					</template>
				</cl-table>
			</el-row>
			<template #foot>
				<el-row type="flex">
					<cl-flex1 />
					<!-- 分页控件 -->
					<zm-pagination />
				</el-row>
			</template>
		</cl-pagefull>
	</cl-crud>
</template>

<script>
import { mapState } from "vuex";
// import MoreFilter from "./components/customer-more-filter";
import dayjs from "dayjs";
import constant from "@/constant";
import pageMinix from "@/mixins/page"
export default {
	name: "CusShopCustomer",
	inject: ["$layout"],
	mixins: [pageMinix],
	components: {
		// MoreFilter
	},
	data() {
		return {
			// 表格配置
			table: {
				"context-menu": ["refresh"],
				columns: [
					// { label: "客户信息", prop: "customer", minWidth: 120 ,align: "left", showOverflowTooltip: true, fixed: true },
					{ label: "头像", prop: "cus_img", width: 100, align: "left"},
					{ label: "客户类型", prop: "cus_type", width: 100 },
					{ label: "客户昵称", prop: "cus_name", width: 100 },
					{ label: "是否重粉", width: 100, prop: "inherit_id" },
					{ label: "来源", prop: "source_name", minWidth: 150 ,align: "left", showOverflowTooltip: true, formatter: row => row.source_name + '-' + row.operator_user_name },
					{ label: "所属事业部", prop: "biz_name", minWidth: 150 ,align: "left", showOverflowTooltip: true },
					{ label: "分公司", prop: "company_name", minWidth: 150 ,align: "left", showOverflowTooltip: true },
					{ label: "品牌", prop: "bra_name", minWidth: 150 ,align: "left", showOverflowTooltip: true },
					{ label: "所属门店", prop: "dept_name", minWidth: 120 ,align: "left", showOverflowTooltip: true },
					{
						label: "加微类型",
						prop: "id_join_type",
						minWidth: 120,
						align: "center",
						// formatter: (row) => this.$constFilter(row.id_join_type, "WX_JOIN_TYPE")
						formatter: row => row.id_join_type == 5 ? '企微' : '个微'
					},
					{ label: "创建时间", prop: "addtime", width: 120 },
					{ label: "加微时间", prop: "wechat_join_day", width: 120 },
					{ label: "广告账户", prop: "adid", width: 120 },
					{ label: "广告项目", prop: "projectid", width: 120 },
					{ label: "广告计划", prop: "promotionid", width: 120 },
					// { label: "首次下定时间", prop: "first_deposit", width: 120 },
					// { label: "首次到店日期", prop: "first_shop", width: 120 },
					// { label: "最近到店日期", prop: "last_shop", width: 120 },

					{ label: "创建部门", prop: "name_add_dept", minWidth: 150 ,align: "left", showOverflowTooltip: true },
					{ label: "创建人", prop: "name_add_op", minWidth: 150 ,align: "left", showOverflowTooltip: true },
					{ label: "转介绍", prop: "is_zjs", width: 100 }
				],
				props: {
					maxHeight: 500
				},
				on: {
					"row-click": row => {
						this.$layout.openCusDetail(row, "new-appoint");
					}
				}
			},
			search: {
				search_type: 0, //搜索类型(0-全部 ,1-手机,2-客户名称,4-微信)
				search_content: "", //搜索名字
				biz_id: "", //事业部
				bra_id: [],
				city_id: "",
				company_id: "",
				dept_id: [], //门店
				id_ascr_dept: "", //所属部门
				id_ascr_op: "", //所属人
				id_add_dept: "", //创建部门
				id_add_op: "", //创健人
				source_id: "", //来源id
				is_zjs: "", //是否转介绍 1是 2不是
				is_rest: "", //1分期  2没分期
				is_deposit: "", //1下了定金  0没下定金
				status: "",
				add_type: 99,
				add_time: [], //创建时间
				add_btime: "", //创建时间开始
				add_etime: "", //创建时间结束
				add_deposit_type: 99,
				add_deposit_time: [], //首次下定日期
				add_deposit_btime: "", //首次下定日期开始
				add_deposit_etime: "", //首次下定日期结束
				last_shop_type: 99,
				last_shop_time: [], // 最近到店日期
				last_shop_btime: "", //最近到店日期开始
				last_shop_etime: "", //最近到店日期结束
				wechat_join_type: 99,
				wechat_join_time: [dayjs().format("YYYY-MM-DD"), dayjs().format("YYYY-MM-DD")], //加微日期
				wechat_join_btime: "", //加微日期开始
				wechat_join_etime: "", //加微日期结束
				first_shop_type: 99,
				first_shop_time: [], //首次日期
				first_shop_begin: "", //首次日期开始
				first_shop_end: "", //首次日期结束
				pay_power_section: [0, 50000], // 消费能力范围
				pay_power_start: 0, //消费能力范围开始
				pay_power_end: 50000, //消费能力范围结束
				last_arrive: "",
				cus_type: "",
				operator_user_id: ""
			},
			operatorUserList: []
		};
	},
	computed: {
		...mapState("common", ["visibleCusDetail", "cusFormSubmit"]),
		bizRefData() {
			const { biz_id } = this.search;
			return this.getBizRefData(biz_id);
		}
	},
	watch: {
		visibleCusDetail(v) {
			if (!v && this.zmComponentIsActive) {
				this.refresh(false);
			}
		},
		cusFormSubmit(v) {
			if (v && this.zmComponentIsActive) {
				this.refresh(false);
			}
		}
	},
	created() {
		this.search.biz_id = this.getCurrBiz();
		this.init();
	},
	methods: {
		async init() {
			const { biz_id } = this.search;
			this.updateBizRefData(biz_id);
			this.userType();
		},
		async onRefresh(params, { next, render, done }) {
			if (!params.bra_id.length) {
				this.$message.warning("请选择品牌");
				return done();
			}
			if(params.search_content&&params.search_content.length < 2){
				this.$message.error("使用关键字搜索时中文至少2位查询，其他至少4位可查询");
				return done();
			}
        
			// this.loading = true;
			const { data } = await next(params)
			// console.log(data)
			// render(data);
		},
		onLoad({ ctx, app }) {
			ctx.service(this.$service.customer).done();
			app.refresh(this.search);
		},
		// crud刷新
		refresh(reset = true) {
			let params = { ...this.search };
			if (reset) {
				params.page = 1;
			}
			this.$refs.crud.refresh(params);
			this.$nextTick(() => {
				this.$refs.table?.calcMaxHeight?.();
			});
		},
		onResize(h) {
			this.table.props.maxHeight = h;
		},
		onFilter(params) {
			this.search = { ...params };
			console.info("this.params", this.search)
			this.$nextTick(() => {
				this.refresh();
			});
		},
		changeBiz(v) {
			this.search = {
				...this.search,
				company_id: "",
				bra_id: [],
				dept_id: [],
				city_id: ""
			};
			// this.refresh();
			this.init();
		},
		async userType() {
			const { biz_id } = this.search;
			this.userList = [];
			if (!biz_id) return;
			const res = await this.$service.user.deptuserlists({ biz_id, post: 4 });
			this.operatorUserList = res;
		},
	}
};
</script>

<style lang="scss" scoped></style>
